<script setup>
	import { ref, computed, onMounted, watch } from 'vue'
	import { useStore } from 'vuex'
	import { useRoute, useRouter } from 'vue-router'
	import EventCenter from '/src/_util/publish-subscribe.js'
	import adminConfig from '/src/_config/admin.config.js'
	
	const store = useStore()
	const route = useRoute()
	const router = useRouter()
	
	// 打开的页面标签
	const pageTags = computed(() => store.state.app.pageTags)
	
	// 检查home标签页是否存在 若不存在则添加
	const checkHomeTagExit = function () {
		if (!pageTags.value.find(item => item.id == 1)) {
			pageTags.value.unshift(store.state.app.haveRoutes.find(item => item.id == 1))
			store.commit('app/setPageTags', pageTags.value)
		}
	}
	// 检查当前路由是否已存在标签页 若不存在则添加
	const checkCurrentRouteTagExit = function () {
		if (!pageTags.value.find(item => item.name == route.name)) {
			pageTags.value.push(store.state.app.haveRoutes.find(item => item.name == route.name))
			store.commit('app/setPageTags', pageTags.value)
		}
	}
	checkHomeTagExit()
	checkCurrentRouteTagExit()
	
	
	onMounted(() => {
		activeTagToCenter()
	})
	watch(() => route.path, (newPath) => {
		// console.log(newPath)
		if (newPath.indexOf('/main') == -1) return
		checkCurrentRouteTagExit()
		setTimeout(() => {
			activeTagToCenter()
		}, 0)
	}, { immediate: false })
	
	// 点击标签
	const clickTagItem = function (tagitem) {
		router.push({ path: tagitem.path })
	}
	// 点击标签的关闭按钮
	const clickCloseIcon = function (tagitem) {
		// console.log(tagitem)
		pageTags.value.forEach((item, index) => {
			if (item.id == tagitem.id) {
				if (route.name == tagitem.name) {
					const leftPageTag = pageTags.value[index - 1]
					const rightPageTag = pageTags.value[index + 1]
					if (adminConfig.closeCurrentTagAction == 'left') {
						leftPageTag ? clickTagItem(leftPageTag) : router.push({ path: '/main' })
					} else if (adminConfig.closeCurrentTagAction == 'right') {
						rightPageTag ? clickTagItem(rightPageTag) : leftPageTag ? clickTagItem(leftPageTag) : router.push({ path: '/main' })
					}
				}
				pageTags.value.splice(index, 1)
				store.commit('app/setPageTags', pageTags.value)
			}
		})
		EventCenter.dispatchEvent('closeTag', tagitem.name)
	}
	
	// 点击下拉选择项
	const command = function (name) {
		// console.log(name)
		if (name == 'closeOther') {
			store.commit('app/setPageTags', store.state.app.haveRoutes.filter(item => item.id == 1 || item.name == route.name))
		} else if (name == 'closeAll') {
			const homeRoute = store.state.app.haveRoutes.find(item => item.id == 1)
			store.commit('app/setPageTags', [homeRoute])
			router.push({ path: homeRoute.path })
		}
		setTimeout(() => {
			activeTagToCenter()
		}, 50)
	}
	
	// 左偏移值
	let leftOffset = ref(0)
	// 滚动速度
	const scrollSpeed = 0.5
	// 鼠标滚轮事件
	const mousewheel = function (e) {
		leftOffset.value += e.wheelDelta * scrollSpeed
		if (leftOffset.value >= 0) {
			leftOffset.value = 0
		}
		const minLeft = minLeftOffset()
		if (leftOffset.value <= minLeft) {
			leftOffset.value = minLeft
		}
	}
	// 获取最小偏移量(即最多能往左偏移量)
	const minLeftOffset = function () {
		// 获取外层父容器的宽度
		const pagetagsWrapDOMWidth = parseFloat(document.defaultView.getComputedStyle(document.querySelector('.pagetags-wrap'), null).width)
		// 获取内层父容器的宽度
		const tagItemWrapDOMWidth = parseFloat(document.defaultView.getComputedStyle(document.querySelector('.tag-item-wrap'), null).width)
		// 计算最小偏移量
		let min = pagetagsWrapDOMWidth - tagItemWrapDOMWidth
		min = min < 0 ? min : 0
		return min
	}
	
	// 让激活的tag元素移动至中间位置
	const activeTagToCenter = function () {
		const pwDOM = document.querySelector('.pagetags-wrap')
		if (!pwDOM) return
		const tiaDOM = document.querySelector('.tag-item.active')
		if (!tiaDOM) return
		// 计算偏移值
		let left = (pwDOM.offsetWidth / 2) - (tiaDOM.offsetLeft + tiaDOM.offsetWidth / 2)
		if (left >= 0) {
			left = 0
		}
		const minLeft = minLeftOffset()
		if (left <= minLeft) {
			left = minLeft
		}
		leftOffset.value = left
	}
</script>

<template>
	<div class="pagetags-container">
		<div class="pagetags-wrap" @mousewheel="mousewheel">
			<div class="tag-item-wrap" :style="{ left: leftOffset + 'px' }">
				<div
					class="tag-item"
					:class="{ active: route.name == item.name }"
					v-for="(item, index) in pageTags"
					:key="index"
					@click="clickTagItem(item)"
				>
					<span class="dot"></span>
					<span class="title">{{ item.meta.title }}</span>
					<el-icon
						class="close-icon"
						@click.stop="clickCloseIcon(item)"
						v-if="item.meta.closable">
						<close />
					</el-icon>
				</div>
			</div>
		</div>
		<div class="btns-wrap">
			<el-dropdown
				trigger="hover"
				placement="bottom"
				:show-timeout="50"
				@command="command"
			>
			    <p class="el-dropdown-title">
					<span class="title">标签选项</span>
					<el-icon class="arrow-icon">
						<arrow-down />
					</el-icon>
			    </p>
			    <template #dropdown>
					<el-dropdown-menu>
						<el-dropdown-item command="closeOther">关闭其他</el-dropdown-item>
						<el-dropdown-item command="closeAll">关闭所有</el-dropdown-item>
					</el-dropdown-menu>
			    </template>
			</el-dropdown>
		</div>
	</div>
</template>

<style scoped lang="less">
	.pagetags-container {
		width: 100%;
		height: 40px;
		display: flex;
		align-items: center;
		.pagetags-wrap {
			flex: 1;
			height: 100%;
			overflow: hidden;
			position: relative;
			.tag-item-wrap {
				display: flex;
				align-items: center;
				flex-wrap: nowrap;
				position: absolute;
				top: 50%;
				transform: translate(0, -50%);
				transition: all 0.3s;
				.tag-item {
					width: auto;
					height: 32px;
					display: flex;
					align-items: center;
					border: 1px solid #ddd;
					border-radius: 3px;
					padding: 0 10px 0 10px;
					margin: 0 2px 0 3px;
					cursor: pointer;
					box-sizing: border-box;
					.dot {
						width: 12px;
						height: 12px;
						background: #ccc;
						border-radius: 50%;
					}
					.title {
						color: #555;
						font-size: 14px;
						margin-left: 5px;
						white-space: nowrap;
					}
					.close-icon {
						margin-left: 5px;
						color: #555;
						font-size: 12px;
						width: 15px;
						height: 15px;
						border-radius: 50%;
						background: transparent;
						display: flex;
						justify-content: center;
						align-items: center;
						&:hover {
							background: #eee;
						}
					}
				}
				.tag-item.active {
					.dot {
						background: #409eff;
					}
				}
			}
			
		}
		.btns-wrap {
			width: auto;
			padding-left: 20px;
			padding-right: 10px;
			.el-dropdown-title {
				background: #409eff;
				color: #fff;
				height: 32px;
				display: flex;
				align-items: center;
				box-sizing: border-box;
				border-radius: 3px;
				padding: 0 10px;
				cursor: pointer;
				.arrow-icon {
					margin-left: 5px;
					font-size: 16px;
					color: #fff;
				}
			}
		}
	}
</style>
